import { useEffect } from "react";
import "./App.css";
import { useState } from "react";
import "prismjs/themes/prism.css";
import Subtitle from "./components/Subtitle";
import Indicator from "./components/Indicator";
import Sql from "./components/Sql";
import { getScenes } from "./md/index";
import React from "react";
import timeline from "./lib/timeline";
import config from "./config.json";
import "./assets/iconfont/iconfont.css";

function calculateSubtitleDuration(text: string) {
    const duration = text.length * 250;
    return duration;
}

function App() {
    const [annotation, setAnnotation] = useState("");
    const [scenes, setScenes] = useState(getScenes(setAnnotation));
    const subtitles: {
        start?: number;
        end?: number;
        content: string;
        sceneKey: number;
    }[] = [
        {
            content: "大家好，我是领力星球的黑爷",
            sceneKey: 0,
        },
        {
            content: "这期视频跟大家分享的 Markdown It 的基本使用",
            sceneKey: 0,
        },
        {
            // content: "",
            content: "这是源码地址",
            sceneKey: 1,
        },
        {
            content: "大家可以到 Github 上面进行下载和查阅",
            sceneKey: 1,
        },
        {
            content: "这里是通过 pnpm 命令去安装依赖包",
            sceneKey: 2,
        },
        {
            content: "这里的示例中讲述了在 Node.js 和 Browser 环境下的使用",
            sceneKey: 3,
        },
        {
            content: "如果你喜欢这个内容，邀请你关注、投币或收藏。",
            sceneKey: 4,
        },
    ];

    const tl = timeline(0, 6000, () => {
        // 场景切换
        for (let i = 0; i < scenes.length; i++) {
            const scene = scenes[i];
            if (tl.in(scene.start, scene.end)) {
                scene.enabled = true;
            } else {
                scene.enabled = false;
            }
        }
        setScenes([...scenes]);
    });

    useEffect(() => {
        // 初始化配置
        for (let i = 0; i < scenes.length; i++) {
            const scene = scenes[i];
            if (scenes[i - 1]) {
                scene.start = scenes[i - 1].end + 1;
            } else {
                scene.start = 0;
            }
            scene.end = scene.start + config.scene.minInterval;
        }
    }, []);

    return (
        <div className="h-full bg-neutral-800 text-white relative">
            {/* <Sql
                data={[
                    {
                        sql: "SELECT * FORM users",
                        records: [{ id: 1, name: "shann" }],
                    },
                    {
                        sql: "SELECT * FORM users",
                        records: [{ id: 1, name: "shann" }],
                    },
                ]}
            /> */}
            {scenes.map((scene, index) => {
                if (scene.enabled) {
                    return React.cloneElement(scene.component, { key: index });
                }
            })}
            <Subtitle items={subtitles} />
            {annotation && (
                <div className="fixed bottom-0  w-full border-t border-t-stone-400 p-4 text-center">
                    <div
                        className="absolute right-10 h-8 -top-8 leading-8 border-l border-r border-t rounded px-4 cursor-pointer"
                        onClick={() => setAnnotation("")}
                    >
                        Close
                    </div>
                    <div
                        className="flex justify-center"
                        dangerouslySetInnerHTML={{
                            __html: annotation,
                        }}
                    ></div>
                    {/* <div className="text-3xl">{annotation}</div> */}
                </div>
            )}
            <Indicator
                items={scenes}
                onChange={(index) => {
                    setAnnotation("");
                    tl.current(scenes[index].start);
                }}
            />
        </div>
    );
}

export default App;
